/*添加标签*/
var btn = document.querySelector(".le i");
var input1 = document.querySelector(".le input");

var ul = document.querySelector("#ul1");

input1.addEventListener("focus",function(){
    btn.className = "fas fa-plus fa-lg";
});
input1.addEventListener("blur",function(){
    btn.className = "far fa-circle fa-lg";

});



btn.addEventListener("click",function(){
/*获取现在的日期与时间*/
    var Time = new Date();
    var H = Time.getHours();
    var M = Time.getMinutes();
    var S = Time.getSeconds();
    var Y = Time.getFullYear();
    var m = Time.getMonth() + 1;
    var D = Time.getDate();
    var hms =Y+"/"+m +"/"+D+"&nbsp;&nbsp;"+ H+":"+M+":"+S;
/*添加li里面的标签以及其他元素*/
    if (input1.value == ""){
        alert("请输入内容");
    }else{


    /*添加li节点*/
        var elem_li = document.createElement('li');
        elem_li.className = "lieae lie";
    /*添加li 里面 span i节点*/
        var span = document.createElement("span");
        var lieaeil = document.createElement("i");
        lieaeil.className = "far fa-circle fa-lg";
    /*添加li 里面 p 节点*/
        var p = document.createElement("p");
        p.innerHTML = input1.value;
    /*添加li 里面 em 节点*/
        var em = document.createElement("em");
        em.className = "fas fa-times";
    /*添加li 里面 b 节点*/
        var b = document.createElement("b");
        b.innerHTML += hms;
    /*添加li 里面  收藏 节点*/
        var sc = document.createElement("i");
        sc.className = "far fa-star fg";


    /*给ul 里面赋值*/
        ul.appendChild(elem_li);
        elem_li.appendChild(span);
        span.appendChild(lieaeil);
        elem_li.appendChild(p);
        elem_li.appendChild(em);
        elem_li.appendChild(b);
        elem_li.appendChild(sc);



    /*清空input框值*/
        input1.value = "";




    /*判断点击i标签 点击圆变成完成*/
        var a = true;
        lieaeil.onclick = function(){
            if(a){
                lieaeil.className = "fas fa-check-circle fa-lg";
                p.className = "moeae";
            }else {
                lieaeil.className = "far fa-circle fa-lg";
                p.className = "";
            }
            a = !a;
        };

    /*点击em标签 移除ul子元素(li)*/

        em.onclick = function(){
            if(this){
                ul.removeChild(elem_li);
            }
        };
    /*li 移入事件*/
        elem_li.onmouseover = function(){
            if(this){
                em.style.display = "block";
                sc.style.display = "block";

            }
        };

    /*li 移出事件*/
        elem_li.onmouseout = function(){
            if(this){
                em.style.display = "none";
                sc.style.display = "none";
            }
        };


    /*收藏*/
        var c = true
        sc.onclick = function(){
            if(c){
                sc.className = "fas fa-star fg";
                elem_li.style.backgroundColor = "#f5f5f5";


                console.log("1");
            }else {
                sc.className = "far fa-star fg";
                elem_li.style.backgroundColor = "#fff";
                console.log("2");

                if(elem_li.style.backgroundColor = "#fff"){
                    elem_li.onmouseover = function() {
                            elem_li.style.backgroundColor = "#f5f5f5";
                            em.style.display = "block";
                            sc.style.display = "block";
                    };
                    elem_li.onmouseout = function() {
                        elem_li.style.backgroundColor = "#fff";
                        em.style.display = "none";
                        sc.style.display = "none";
                    };
                }
            }
            c = !c;

        };




    }

});